<script setup>
    import { ref } from 'vue';
    const booklist=ref([
        {id:1,name:"《红楼梦》",author:"曹雪芹"},
        {id:2,name:"《西游记》",author:"吴承恩"},
        {id:3,name:"《三国演义》",author:"罗贯中"},
        {id:4,name:"《水浒传》",author:"施耐腌"},
    ])
    const ondel=(i)=>{
        if(window.confirm("确定删除吗")){
            booklist.value.splice(i,1);
        }
    }
</script>
<template>
    <h1>我的书架</h1>
    <ul>
        <li v-for="(item,index) in booklist" :key="item.id">
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="ondel(index)">删除</button>
        </li>
    </ul>
</template>
<style> 
    #app{
        width: 400px;
        margin: 100px auto;
    }
    ul{
        list-style: none;
    }
    ul li{
        display: flex;
        justify-content: space-around;
        padding: 10px,0;
        border-bottom: 1px solid #ccc;
    }
</style>